<template>
	<view class="withdrawal">
		<h1><span>￥</span>{{userInfo.money}}</h1>
		<p>账户余额</p>
		<view class="main">
			<p>*提现金额</p>
			<view>
				<input type="number" placeholder="请输入金额" @input="userGetAmount"
					v-model="withdrawInfo.amount"><span @click='all'>全部提现</span>
			</view>
			<p style="font-size: 10px;color: red;">
				*最小提现金额{{configInfo.min}}元,最高提现金额{{configInfo.max}}元,提现收取手续费{{configInfo.rate}}%,24小时之内到账
			</p>
			<view>
				<span>到账金额(≈)：{{getAmount}}</span>
			</view>
			</br>
			<p>*提现地址</p>
			<view style="flex-direction: column;">
				<view v-for="(item,key) in configInfo.type" :class="{'view':index==item}"
					@click="ins(item)">
					<p v-if="item == 2">
						<image src="../../../../static/user/77.png"></image>微信
					</p>
					<p v-if="item == 3">
						<image src="../../../../static/user/78.png"></image>支付宝
					</p>
					<p v-if="item == 1">
						<image style="width: 42rpx;height: 24rpx;" src="../../../../static/user/79.png"></image>银行卡
					</p>
					<i></i>
				</view>
			</view>
			<button @click="doWithdraw">确认提现</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				userInfo: {},
				configInfo: {},
				withdrawInfo: {
					amount: "",
					type: "",
				},
				getAmount: "",
			};
		},
		methods: {
			// 全部提现
			all(){
				this.withdrawInfo.amount=this.userInfo.money
				this.userGetAmount()
			},
			ins(index) {
				this.index = index;
				this.withdrawInfo.type = index;
			},
			getUserInfo() {
				this.$httpRequest('/user/getUserInfo').then(res => {
					this.userInfo = res.data;
				});
			},
			userGetAmount() {
				this.getAmount = (this.withdrawInfo.amount - (this.withdrawInfo.amount * this.configInfo.rate /100)).toFixed(2)
			},
			doWithdraw() {
				let params = this.withdrawInfo;

				if (Number(params.amount) < Number(this.configInfo.min)) {
					uni.showToast({
						title: '提现金额不能小于最少提现金额',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				if (Number(params.amount) > Number(this.configInfo.max)) {
					uni.showToast({
						title: '提现金额不能大于最多提现金额',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				console.log(params)
				if (!this.configInfo.type.includes(params.type)) {
					uni.showToast({
						title: '请选择提现方式',
						icon: 'error',
						duration: 2000
					});
					return;
				}
				uni.showModal({
					title: '提现确认',
					content: '您确认要进行提现操作吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$httpRequest('/user/withdraw', params).then(res => {
								uni.showToast({
									title: '提现成功',
									icon: 'success',
									duration: 2000
								});
							});
						} else if (res.cancel) {

						}
					}
				});
			}
		},
		onLoad() {
			this.getUserInfo();
			// this.configInfo = JSON.parse(uni.getStorageSync('configInfo'));
			this.$httpRequest('/index/getWithDrawConfig').then(res=>{
				this.configInfo=res.data
				this.index=this.configInfo.type[0]||0
				this.withdrawInfo.type = this.configInfo.type[0]||0
			})
		}
	}
</script>

<style lang="less">
	.withdrawal {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(180deg, #53C277 0%, #81E2A8 100%);
		padding-top: 56rpx;
		box-sizing: border-box;

		&>h1 {
			text-align: center;
			font-size: 30px;
			color: #006322;

			&>span {
				font-size: 15px;
			}
		}

		&>p {
			font-size: 12px;
			color: #3F925C;
			margin-top: 10px;
			text-align: center;
		}

		&>.main {
			width: 100%;
			height: calc(100vh - 242rpx);
			background: #F0F0F0;
			border-radius: 32rpx 32rpx 0 0;
			margin-top: 56rpx;
			padding-top: 16rpx;
			box-sizing: border-box;

			&>button {
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
				color: #fff;
				background: #5FC07B;
				font-size: 15px;
				margin-top: 100rpx;
			}

			&>view {
				width: 690rpx;
				min-height: 80rpx;
				padding: 0 20rpx;
				background: #fff;
				box-sizing: border-box;
				margin: 20rpx auto;
				border-radius: 20rpx;
				display: flex;
				align-items: center;

				&>.view {
					&>i {
						background: #3F925C;
					}
				}

				&>view {
					width: 100%;
					height: 70rpx;
					border-bottom: #F0F0F0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&>p {
						display: flex;
						align-items: center;
						font-size: 13px;

						&>image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}

					&>i {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: #F0F0F0;
					}
				}

				&>input {
					flex: 1;
					height: 100%;
					font-size: 12px;
				}

				&>span {
					font-size: 12px;
					color: #3F925C;
				}
			}

			&>p {
				margin: 0rpx 54rpx;
				font-size: 13px;
				font-weight: bold;
			}
		}
	}
</style>